////
/// Components
/// Hamburger
////

@import 'utils/shared/layout';
@import 'keyframes';
@import 'props';

.Hamburger {
  z-index: get-z-index(hamburger);
  position: absolute;
  top: get-spacing();
  left: 50%;
  margin-left: -$hamburger-offset;
  padding: get-spacing(tightest);
  // prevent the 'X' on page load
  opacity: 0;
  animation: FadeActivator get-duration(slow) get-easing() forwards;

  @media only screen and (min-width: get-breakpoint()) {
    @include visually-hidden;
  }

  &[aria-expanded='true'] {
    .HamburgerBun::before,
    .HamburgerBun::after {
      background-color: white;
    }

    .HamburgerBun::before {
      animation-name: HamburgerBefore-In;
    }

    .HamburgerBun::after {
      animation-name: HamburgerAfter-In;
    }

    .HamburgerPatty {
      animation-name: HamburgerPatty-In;
    }
  }
}

///
/// HamburgerBun menu styles
.HamburgerBun {
  position: relative;
  width: $hamburger-width;
  height: $hamburger-height;

  &::before,
  &::after {
    content: '';
    top: 0;
    display: block;
    transition: background-color get-duration() get-easing();
  }

  &::before,
  &::after,
  .HamburgerPatty {
    position: absolute;
    left: 0;
    width: 100%;
    height: $hamburger-line-height;
    border-radius: $hamburger-line-height;
    background-color: get-color(coal, dark);
    animation-duration: get-duration();
    animation-timing-function: get-easing();
    animation-fill-mode: both;
  }

  &::before {
    transform: translateY(0) rotate(0);
    animation-name: HamburgerBefore-Out;
  }

  &::after {
    transform: translateY($hamburger-after-y) rotate(0);
    animation-name: HamburgerAfter-Out;
  }
}

.HamburgerPatty {
  top: $hamburger-vertical-center;
  animation-name: HamburgerPatty-Out;
}
